import React, { memo } from 'react'

import { AppSongsWrap } from './style'
import songsPlay from '../../assets/img/songs-play.png'

export default memo(function AppSongs(props) {
  const { info } = props
  console.log(info)
  return (
    <AppSongsWrap>
      <h4 className="songs-title">最新音乐</h4>
      <div className="songs-list">
        {
          info.map((item, index) => {
            return (
              <div className="songs-item" key={item.id}>
                <span className="songs-index">{index + 1}</span>
                <div className="songs-detail">
                  <img src={item.picUrl} alt="" />
                  <div className="songs-desc">
                    <h5>{item.name}</h5>
                    <p>{item.song.album.company}</p>
                  </div>
                  <img src={songsPlay} alt="" className="play"/>
                </div>
              </div>
            )
          })
        }
      </div>
    </AppSongsWrap>
  )
})
